<script setup lang="ts">
import { usePagination } from '/@lib/hooks/usePagination.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { useLoading } from '/@lib/hooks/useLoading'
import { sys_normal_disable } from '/@/const/Options.ts'
import { UserQuery } from '/@/api/system/sysUser/types'
import { ApiSysUser } from '/@/api/system/sysUser'

const { loading, showLoading, hideLoading } = useLoading()
const { pageNum, pageSize, total, setTotal, onChangeCurrent } = usePagination(() => getTableList())
const queryFormRef = ref()
const { form: queryParams } = useForm<UserQuery>({
  pageNum: pageNum.value,
  pageSize: pageSize.value,
  userName: '',
  phoneNumber: '',
  status: '',
  deptId: '',
  roleId: '',
  deptName: ''
})
const tableData = ref([])
const leader = defineModel()

/** 搜索按钮操作 */
const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

const selectTableRef = ref()
const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysUser.page(queryParams)
    tableData.value = res.rows
    setTotal(res.total)
    await selectTableRef.value.setDefaultSelection()
  } finally {
    hideLoading()
  }
}
onMounted(() => {
  getTableList()
})

const handleSelectTableChange = (value: any) => {
  console.log('handleChange', value)
  console.log('leader', leader)
  // emit('update:modelValue', value)
}
</script>

<template>
  <VipSelectTable
    ref="selectTableRef"
    v-model="leader"
    :props="{ label: 'nickName', value: 'userId' }"
    placeholder="请选择负责人"
    clearable
    pagination
    :loading="loading"
    :table-data="tableData"
    :total="total"
    :page-size="pageSize"
    :current-page="pageNum"
    @page-change="onChangeCurrent"
    @change="handleSelectTableChange"
  >
    <template #header>
      <VipQueryForm>
        <VipQueryFormTopPanel>
          <el-form ref="queryFormRef" :model="queryParams" inline label-width="80px" label-position="right">
            <el-form-item label="用户名称" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input
                v-model="queryParams.phoneNumber"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
              <el-input
                v-model="queryParams.deptName"
                placeholder="请输入部门名称"
                clearable
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <!--   搜索按钮   -->
            <el-form-item>
              <el-button plain type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </VipQueryFormTopPanel>
        <VipQueryFormBottomPanel>
          <el-alert title="双击选择用户" type="info" :closable="true" />
        </VipQueryFormBottomPanel>
      </VipQueryForm>
    </template>

    <el-table-column label="用户名称" align="center" prop="userName" show-overflow-tooltip />
    <el-table-column label="用户昵称" align="center" prop="nickName" show-overflow-tooltip />
    <el-table-column label="部门" align="center" prop="deptName" show-overflow-tooltip />
    <el-table-column label="手机号码" align="center" prop="phoneNumber" width="120" />
    <el-table-column label="状态" align="center" prop="status">
      <template #default="scope">
        <VipDictTag :options="sys_normal_disable" :value="scope.row.status" />
      </template>
    </el-table-column>
  </VipSelectTable>
</template>

<style scoped lang="scss"></style>
